<template>
    <div class="login">
    <div class="login-us">
     <mt-field label="用户名"
    @input="bb"
    
      state="success" placeholder="手机号/邮箱/用户名" v-model="username"></mt-field>
   <mt-field label="密码" state="error" placeholder="登录密码" type="password" v-model="password"></mt-field>   
    <mt-button type="primary" size="large"
    @touchstart.native="login"
    >发现居家好物</mt-button> 
  
    </div> 
  </div>
 
</template>
    
<script>
import { Field ,Button } from 'mint-ui';
import {mapMutations,mapState} from 'vuex'
export default {
    created(){
        
    },
    comments:{
        'mt-field':Field,
        'mt-button':Button
    },
    data(){
        return {
            username:'',
            password:''
        }
    },
    computed:{
        ...mapState(['user'])
    },
    watch:{
        user(bf){
             console.log(bf)
            if(bf.isLogin===true){
                this.$router.push('/home')
            }
        }
    },
    methods:{
       
           ...mapMutations(['loginSuccess']),
    bb(){
        if(this.username===''){
            return false
        }
    },


        login(){
            const {username, password} = this
        if(this.username.length > 6 && this.password.length >6) {
               this.$http.post('http://rap2api.taobao.org/app/mock/86910/api/user',{
            username,
            password
        })
        .then(resp=>{
            console.log(resp)
            this.loginSuccess(resp.data.data)
            this.$router.push('/home')
        })
           }
           else {
               alert('用户名密码大于6位')
           }
        }
    }
}
</script>

<style lang="scss" scoped>
.login{
    height: 100%;
    background-image: url('../assets/login.png' ) ;
    background-repeat:no-repeat;
    background-size:100%;
    &-us{
        padding-top:250px;
    }
}

</style>
